<template>
  <div class="menu" id="menu-box">
    <div class="menu-tite">
      <div class="flex">
        <div class="img-box">
          <img src="@/assets/ivr/menu.svg" alt="" class="w-16 h-16" />
        </div>
        <div class="titles">{{ nodeName }}</div>
      </div>
      <div>
        <el-popover placement="bottom" trigger="click" width="100">
          <div class="node-list">
            <div class="p-8" @click="copyNode">复制</div>
            <el-divider style="margin: 4px 0" />
            <div class="p-8" @click.stop="delNode">删除</div>
          </div>
          <template #reference>
            <svg
              t="1744771665484"
              class="icon cursor-pointer"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5189"
              width="16"
              height="16"
            >
              <path
                d="M97.95349285 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614346 0 94.17807171 94.17807171 0 1 0-188.35614346 0Z"
                fill="#2c2c2c"
                p-id="5190"
              ></path>
              <path
                d="M510.81520458 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614344 0 94.17807171 94.17807171 0 1 0-188.35614344 0Z"
                fill="#2c2c2c"
                p-id="5191"
              ></path>
              <path
                d="M923.6769163 509.99901215m-94.17807172 0a94.17807171 94.17807171 0 1 0 188.35614343 0 94.17807171 94.17807171 0 1 0-188.35614343 0Z"
                fill="#2c2c2c"
                p-id="5192"
              ></path>
            </svg>
          </template>
        </el-popover>
      </div>
    </div>
    <div class="menu-content">
      <el-form :model="formState">
        <el-form-item label="节点名称" required>
          <el-input v-model="formState.name" @input="updateProperties" />
        </el-form-item>
        <el-form-item label="是否支持打断">
          <el-switch v-model="formState.interrupt" @change="updateProperties" />
        </el-form-item>
        <el-form-item label="放音类型">
          <el-radio-group v-model="formState.playbackType" @change="updateProperties('clear')">
            <el-radio :label="1">语音文件</el-radio>
            <el-radio :label="2">文本内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语音文件" v-if="formState.playbackType == 1">
          <el-select
            v-model="formState.fileId"
            style="margin-right: 10px"
            placeholder="请选择语音文件"
            @change="updateProperties('path', 'filePath')"
          >
            <el-option
              :value="item.id"
              v-for="item in voiceOptions"
              :key="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
          <AudioPlayred style="width: 30px; height: 30px" v-if="audioUrl" :url="audioUrl" />
        </el-form-item>
        <el-form-item label="文本内容" v-if="formState.playbackType == 2">
          <el-input
            type="textarea"
            @dblclick.stop="changeContent"
            v-model="formState.content"
            placeholder="请输入文本内容"
            :rows="1"
            @change="updateProperties"
          />
        </el-form-item>
        <el-form-item label="操作类型">
          <el-radio-group v-model="formState.inputType" @change="updateProperties('changeType')">
            <el-radio :label="1">按键</el-radio>
            <el-radio :label="2">匹配</el-radio>
          </el-radio-group>
        </el-form-item>
        <h5 class="h-l" v-if="formState.inputType == 1"
          >按键操作列表 (锚点只能输出一次，且必须有值)</h5
        >
        <h5 class="h-l" v-if="formState.inputType == 2"
          >回答分支列表 (关键词可输入多次，分支属性必须有值)</h5
        >
        <div class="h-ls mb-20px" v-if="formState.inputType == 1">
          <el-table :data="formState.menuButtons" style="width: 100%">
            <el-table-column prop="buttonName" label="按键名称">
              <template #default="scope">
                <span v-if="!scope.row.isisEditing">{{ scope.row.buttonName }}</span>
                <el-input
                  v-else
                  class="!w-100px"
                  v-model="scope.row.buttonName"
                  clearable
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="buttonValue" label="按键值">
              <template #default="scope">
                <span v-if="!scope.row.isisEditing">{{ scope.row.buttonValue }}</span>
                <el-select
                  v-else
                  class="!w-100px"
                  v-model="scope.row.buttonValue"
                  clearable
                  @change="setDisabled"
                  placeholder="请选择按键"
                >
                  <el-option
                    :value="item.value"
                    v-for="item in keyOption"
                    :key="item.id"
                    :disabled="item.disabled"
                    >{{ item.name }}</el-option
                  >
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="scope">
                <el-button
                  type="primary"
                  v-if="!scope.row.isisEditing"
                  link
                  @click="editTable(scope.$index)"
                  >编辑</el-button
                >
                <el-button type="primary" v-else link @click="keepSave(scope.$index)"
                  >保存</el-button
                >
                <el-button type="primary" link @click="add">新增</el-button>
                <el-button
                  link
                  size="mini"
                  type="danger"
                  v-if="scope.$index != 0"
                  @click="handleDelete(scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="h-ls mb-20px" v-if="formState.inputType == 2">
          <el-checkbox-group
            v-model="formState.matching"
            @change="updateProperties('matching')"
            class="pl-20px"
          >
            <el-checkbox
              v-for="(item, idx) in matchingOption"
              :key="item.id"
              :label="item"
              :disabled="item.branch == '未识别'"
            >
              <div class="flex items-center">
                <span class="mr-5px">{{ item.branch }}</span>
                <svg
                  t="1744862016737"
                  class="cursor-pointer"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6018"
                  width="16"
                  height="16"
                  :class="item.type == 1 ? 'over-icon-not' : 'hover-icon'"
                  @click.stop="showEdith(item, idx)"
                >
                  <path
                    d="M884.950084 223.992517c2.362814 5.238304 4.217045 11.375072 5.687536 18.343787 1.470491 6.963599 2.172479 14.316054 2.172479 21.85782 0 7.605212-1.470491 15.146978-4.344958 22.751167-2.940982 7.608282-7.54279 14.895245-13.936407 21.862937-6.964622 7.030114-13.230326 13.101389-18.727527 18.343787-5.493108 5.238304-10.289344 9.904581-14.378475 13.994736-4.6673 4.6673-9.013281 8.757454-13.038968 12.272511L665.526629 189.795671c6.967692-6.389524 15.21247-14.126742 24.798802-23.200398 9.586332-9.012258 17.579377-16.171308 23.969924-21.411659 8.116865-6.389524 16.554024-10.929934 25.245987-13.548574 8.694009-2.622734 17.257036-3.770883 25.695219-3.515057 8.435113 0.318248 16.555048 1.594311 24.415063 3.962242 7.861038 2.301416 14.634302 4.985548 20.453844 7.860015 12.205996 6.393617 25.692149 17.641799 40.520879 33.68417C865.326141 189.730179 876.829126 206.541053 884.950084 223.992517zM206.550263 650.944516c3.452635-3.515057 11.634991-11.825326 24.352641-24.927739 12.784164-13.102413 28.761044-29.335119 47.872311-48.575322l63.597457-63.853283 70.562079-70.879304 187.206706-188.103122 162.857135 164.451446L575.790862 607.226828 506.121106 678.107155c-23.200398 22.754237-44.100404 43.591821-62.701041 62.573127-18.599613 18.983353-33.939997 34.579563-46.145993 46.786583-12.209066 12.271488-19.429515 19.240203-21.796422 21.027919-5.815449 5.241374-12.461823 10.80509-20.00359 16.620539-7.54279 5.815449-15.403828 10.478655-23.523763 13.993712-8.115841 4.093225-20.00359 9.012258-35.728736 14.894222-15.658631 5.815449-32.081673 11.502985-49.213865 17.063631-17.129122 5.562692-33.361829 10.354835-48.764634 14.44806-15.403828 4.089132-26.844392 6.707772-34.387181 7.860015-15.658631 1.726318-26.14138-0.574075-31.383778-6.967692-5.241374-6.390547-6.64535-17.191544-4.344958-32.341592 1.14815-8.179286 3.898797-19.938098 8.243755-35.407418 4.345981-15.468296 9.012258-31.510668 13.932314-48.128137 4.923126-16.617469 9.715269-31.957853 14.382569-45.955658 4.6673-13.998829 8.438183-23.647583 11.313673-28.888957 3.515057-8.182356 7.413853-15.59621 11.758812-22.308075C192.170764 666.540725 198.433398 659.126872 206.550263 650.944516zM499.029594 817.250192l77.848019 0 0 77.913511L499.029594 895.163703 499.029594 817.250192zM657.603169 817.250192l77.848019 0 0 77.913511-77.848019 0L657.603169 817.250192zM816.239166 817.250192l77.848019 0 0 77.913511-77.848019 0L816.239166 817.250192z"
                    p-id="6019"
                    fill="#172b4d"
                  ></path>
                </svg>
              </div>
            </el-checkbox>
          </el-checkbox-group>
          <div class="pl-20px pb-10px">
            <el-button link type="primary" @click="addBranch">新建分支</el-button>
          </div>
        </div>
        <el-form-item label="大模型跳转到" v-if="formState.inputType != 1">
          <el-select
            v-model="formState.aiJumpType"
            placeholder="请选择大模型跳转到"
            @change="updateProperties('nodes')"
          >
            <el-option
              v-for="item in aiJumpTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="大模型轮次">
          <el-input-number
            :min="0"
            v-model="formState.aiNumber"
            @change="updateProperties('aiNumber')"
          />
        </el-form-item>
        <el-form-item label="坐席班组" v-if="formState.aiJumpType == 5">
          <el-select
            @change="updateProperties"
            v-model="formState.aiJumpFlowId"
            placeholder="请选择坐席班组"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.skillId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点" v-if="formState.aiJumpType == 4">
          <el-select
            class="w-100%"
            v-model="formState.aiJumpFlowId"
            placeholder="请选择要跳转的节点"
            @change="updateProperties"
          >
            <el-option
              v-for="item in ivrOption"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.properties.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先设置" v-if="formState.inputType == 2">
          <el-radio-group v-model="formState.priorityType" @change="updateProperties">
            <el-radio :label="2">知识库优先</el-radio>
            <el-radio :label="3" :disabled="formState.aiNumber == 0">大模型优先</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="大模型优先" v-if="formState.priorityType == 3">
          <el-switch
            v-model="formState.isStartAi"
            active-text="开启"
            inactive-text="关闭"
            :inactive-value="2"
            :active-value="1"
          />
        </el-form-item>
        <div class="text-12px mt--15px mb-20px color-#172b4d" v-if="formState.inputType == 2"
          >(当{{ formState.priorityType == 2 ? '知识库' : '大模型' }}匹配不到信息,会询问{{
            formState.priorityType == 2 ? '大模型' : '知识库'
          }}并将回答自动创建一个新的知识)</div
        >
        <el-form-item label="未按键播放类型" v-if="formState.inputType == 1">
          <el-radio-group v-model="formState.notPlaybackType" @change="updateProperties('clear1')">
            <el-radio :label="0">文件</el-radio>
            <el-radio :label="1">内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="未按键播放文件"
          v-if="formState.notPlaybackType == 0 && formState.inputType == 1"
        >
          <el-select
            v-model="formState.notFileId"
            placeholder="请选择语音文件"
            @change="updateProperties('path', 'notFilePath')"
          >
            <el-option
              :value="item.id"
              v-for="item in voiceOptions"
              :key="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="未按键播放内容"
          v-if="formState.notPlaybackType == 1 && formState.inputType == 1"
        >
          <el-input
            type="textarea"
            v-model="formState.notContent"
            placeholder="请输入内容"
            :rows="1"
            @change="updateProperties"
          />
        </el-form-item>

        <el-form-item label="错误按键播放类型" v-if="formState.inputType == 1">
          <el-radio-group
            v-model="formState.errorPlaybackType"
            @change="updateProperties('clear2')"
          >
            <el-radio :label="0">文件</el-radio>
            <el-radio :label="1">内容</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="错误按键播放文件"
          v-if="formState.errorPlaybackType == 0 && formState.inputType == 1"
        >
          <el-select
            v-model="formState.errorFileId"
            placeholder="请选择语音文件"
            @change="updateProperties('path', 'errorFilePath')"
          >
            <el-option
              :value="item.id"
              v-for="item in voiceOptions"
              :key="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="错误按键播放内容"
          v-if="formState.errorPlaybackType == 1 && formState.inputType == 1"
        >
          <el-input
            type="textarea"
            v-model="formState.errorContent"
            placeholder="请输入内容"
            :rows="1"
            @change="updateProperties"
          />
        </el-form-item>
        <el-form-item label="AI超时时间(毫秒)">
          <el-input-number
            id="inputNumber"
            v-model="formState.timeout"
            :min="0"
            :step="1000"
            @change="updateProperties"
          />
          <span class="ml-5px">(1秒 = 1000毫秒)</span>
        </el-form-item>
        <el-form-item label="用户未回答" v-if="formState.inputType == 2">
          <div class="flex">
            <el-select
              class="mr-5px"
              v-model="formState.asrNotJumpType"
              placeholder="请选择用户未回答跳转到"
              @change="updateProperties('nodes')"
            >
              <el-option
                v-for="item in asrNotJumpOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input-number
              v-if="formState.asrNotJumpType == 7"
              id="inputNumber"
              v-model="formState.maxRetries"
              :min="1"
              @change="updateProperties"
            />
            <el-text v-if="formState.asrNotJumpType == 7">次</el-text>
          </div>
        </el-form-item>
        <el-form-item label="坐席班组" v-if="formState.asrNotJumpType == 5">
          <el-select
            @change="updateProperties"
            v-model="formState.asrNotJumpId"
            placeholder="请选择坐席班组"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.skillId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="指定节点"
          v-if="formState.inputType == 2 && formState.asrNotJumpType == 4"
        >
          <el-select
            class="w-100%"
            v-model="formState.asrNotJumpId"
            placeholder="请选择要跳转的节点"
            @change="updateProperties"
          >
            <el-option
              v-for="item in ivrOption"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.properties.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="用户未回答播放音乐是否随机" v-if="formState.inputType == 2">
          <el-radio-group v-model="formState.asrNotFileType" @change="updateProperties('random1')">
            <el-radio :label="1">指定</el-radio>
            <el-radio :label="2">随机</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用户未回答播放的音乐"
          v-if="formState.inputType == 2 && formState.asrNotFileType == 1"
        >
          <el-select
            v-model="userNotMusic"
            @change="updateProperties('arr')"
            placeholder="请选择用户未回答播放的语音"
          >
            <el-option
              v-for="item in asrNotOptions"
              :key="item.id"
              :label="item.content"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <svg
            t="1744862016737"
            class="cursor-pointer hover-icon ml-5px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6018"
            width="16"
            height="16"
            @click="setAsrVoice(1)"
          >
            <path
              d="M884.950084 223.992517c2.362814 5.238304 4.217045 11.375072 5.687536 18.343787 1.470491 6.963599 2.172479 14.316054 2.172479 21.85782 0 7.605212-1.470491 15.146978-4.344958 22.751167-2.940982 7.608282-7.54279 14.895245-13.936407 21.862937-6.964622 7.030114-13.230326 13.101389-18.727527 18.343787-5.493108 5.238304-10.289344 9.904581-14.378475 13.994736-4.6673 4.6673-9.013281 8.757454-13.038968 12.272511L665.526629 189.795671c6.967692-6.389524 15.21247-14.126742 24.798802-23.200398 9.586332-9.012258 17.579377-16.171308 23.969924-21.411659 8.116865-6.389524 16.554024-10.929934 25.245987-13.548574 8.694009-2.622734 17.257036-3.770883 25.695219-3.515057 8.435113 0.318248 16.555048 1.594311 24.415063 3.962242 7.861038 2.301416 14.634302 4.985548 20.453844 7.860015 12.205996 6.393617 25.692149 17.641799 40.520879 33.68417C865.326141 189.730179 876.829126 206.541053 884.950084 223.992517zM206.550263 650.944516c3.452635-3.515057 11.634991-11.825326 24.352641-24.927739 12.784164-13.102413 28.761044-29.335119 47.872311-48.575322l63.597457-63.853283 70.562079-70.879304 187.206706-188.103122 162.857135 164.451446L575.790862 607.226828 506.121106 678.107155c-23.200398 22.754237-44.100404 43.591821-62.701041 62.573127-18.599613 18.983353-33.939997 34.579563-46.145993 46.786583-12.209066 12.271488-19.429515 19.240203-21.796422 21.027919-5.815449 5.241374-12.461823 10.80509-20.00359 16.620539-7.54279 5.815449-15.403828 10.478655-23.523763 13.993712-8.115841 4.093225-20.00359 9.012258-35.728736 14.894222-15.658631 5.815449-32.081673 11.502985-49.213865 17.063631-17.129122 5.562692-33.361829 10.354835-48.764634 14.44806-15.403828 4.089132-26.844392 6.707772-34.387181 7.860015-15.658631 1.726318-26.14138-0.574075-31.383778-6.967692-5.241374-6.390547-6.64535-17.191544-4.344958-32.341592 1.14815-8.179286 3.898797-19.938098 8.243755-35.407418 4.345981-15.468296 9.012258-31.510668 13.932314-48.128137 4.923126-16.617469 9.715269-31.957853 14.382569-45.955658 4.6673-13.998829 8.438183-23.647583 11.313673-28.888957 3.515057-8.182356 7.413853-15.59621 11.758812-22.308075C192.170764 666.540725 198.433398 659.126872 206.550263 650.944516zM499.029594 817.250192l77.848019 0 0 77.913511L499.029594 895.163703 499.029594 817.250192zM657.603169 817.250192l77.848019 0 0 77.913511-77.848019 0L657.603169 817.250192zM816.239166 817.250192l77.848019 0 0 77.913511-77.848019 0L816.239166 817.250192z"
              p-id="6019"
              fill="#172b4d"
            ></path>
          </svg>
        </el-form-item> -->
        <el-form-item label="用户重复回答" v-if="formState.inputType == 2">
          <el-select
            v-model="formState.asrRepeatJumpType"
            placeholder="请选择用户未回答跳转到"
            @change="updateProperties('nodes')"
          >
            <el-option
              v-for="item in asrNotJumpOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="坐席班组" v-if="formState.asrRepeatJumpType == 5">
          <el-select
            @change="updateProperties"
            v-model="formState.asrRepeatJumpId"
            placeholder="请选择坐席班组"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.skillId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="指定节点"
          v-if="formState.inputType == 2 && formState.asrRepeatJumpType == 4"
        >
          <el-select
            class="w-100%"
            v-model="formState.asrRepeatJumpId"
            placeholder="请选择要跳转的节点"
            @change="updateProperties"
          >
            <el-option
              v-for="item in ivrOption"
              :disabled="item.disabled"
              :key="item.id"
              :label="item.properties.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="用户重复回答播放音乐是否随机" v-if="formState.inputType == 2">
          <el-radio-group
            v-model="formState.asrRepeatFileType"
            @change="updateProperties('random2')"
          >
            <el-radio :label="1">指定</el-radio>
            <el-radio :label="2">随机</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="用户重复回答播放的音乐"
          v-if="formState.inputType == 2 && formState.asrRepeatFileType == 1"
        >
          <el-select
            v-model="userRepeatMusic"
            @change="updateProperties('arr2')"
            placeholder="请选择用户重复回答播放的音乐"
          >
            <el-option
              v-for="item in asrRepeatOptions"
              :key="item.id"
              :label="item.content"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <svg
            t="1744862016737"
            class="cursor-pointer hover-icon ml-5px"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6018"
            width="16"
            height="16"
            @click="setAsrVoice(2)"
          >
            <path
              d="M884.950084 223.992517c2.362814 5.238304 4.217045 11.375072 5.687536 18.343787 1.470491 6.963599 2.172479 14.316054 2.172479 21.85782 0 7.605212-1.470491 15.146978-4.344958 22.751167-2.940982 7.608282-7.54279 14.895245-13.936407 21.862937-6.964622 7.030114-13.230326 13.101389-18.727527 18.343787-5.493108 5.238304-10.289344 9.904581-14.378475 13.994736-4.6673 4.6673-9.013281 8.757454-13.038968 12.272511L665.526629 189.795671c6.967692-6.389524 15.21247-14.126742 24.798802-23.200398 9.586332-9.012258 17.579377-16.171308 23.969924-21.411659 8.116865-6.389524 16.554024-10.929934 25.245987-13.548574 8.694009-2.622734 17.257036-3.770883 25.695219-3.515057 8.435113 0.318248 16.555048 1.594311 24.415063 3.962242 7.861038 2.301416 14.634302 4.985548 20.453844 7.860015 12.205996 6.393617 25.692149 17.641799 40.520879 33.68417C865.326141 189.730179 876.829126 206.541053 884.950084 223.992517zM206.550263 650.944516c3.452635-3.515057 11.634991-11.825326 24.352641-24.927739 12.784164-13.102413 28.761044-29.335119 47.872311-48.575322l63.597457-63.853283 70.562079-70.879304 187.206706-188.103122 162.857135 164.451446L575.790862 607.226828 506.121106 678.107155c-23.200398 22.754237-44.100404 43.591821-62.701041 62.573127-18.599613 18.983353-33.939997 34.579563-46.145993 46.786583-12.209066 12.271488-19.429515 19.240203-21.796422 21.027919-5.815449 5.241374-12.461823 10.80509-20.00359 16.620539-7.54279 5.815449-15.403828 10.478655-23.523763 13.993712-8.115841 4.093225-20.00359 9.012258-35.728736 14.894222-15.658631 5.815449-32.081673 11.502985-49.213865 17.063631-17.129122 5.562692-33.361829 10.354835-48.764634 14.44806-15.403828 4.089132-26.844392 6.707772-34.387181 7.860015-15.658631 1.726318-26.14138-0.574075-31.383778-6.967692-5.241374-6.390547-6.64535-17.191544-4.344958-32.341592 1.14815-8.179286 3.898797-19.938098 8.243755-35.407418 4.345981-15.468296 9.012258-31.510668 13.932314-48.128137 4.923126-16.617469 9.715269-31.957853 14.382569-45.955658 4.6673-13.998829 8.438183-23.647583 11.313673-28.888957 3.515057-8.182356 7.413853-15.59621 11.758812-22.308075C192.170764 666.540725 198.433398 659.126872 206.550263 650.944516zM499.029594 817.250192l77.848019 0 0 77.913511L499.029594 895.163703 499.029594 817.250192zM657.603169 817.250192l77.848019 0 0 77.913511-77.848019 0L657.603169 817.250192zM816.239166 817.250192l77.848019 0 0 77.913511-77.848019 0L816.239166 817.250192z"
              p-id="6019"
              fill="#172b4d"
            ></path>
          </svg>
        </el-form-item> -->
        <el-form-item label="重复回答关键字" v-if="formState.inputType != 1">
          <el-select
            default-first-option
            multiple
            clearable
            filterable
            allow-create
            v-model="formState.asrRepeatKeys"
            placeholder="请输入重复回答关键字(逗号','隔开)"
            @change="updateProperties"
          ></el-select>
        </el-form-item>

        <!-- <el-form-item label="最大重试次数">
          <el-input-number
            id="inputNumber"
            v-model="formState.maxRetries"
            :min="0"
            @change="updateProperties"
          />
        </el-form-item> -->
      </el-form>
    </div>
    <Dialog v-model="branchDialog" title="分支" width="450">
      <el-form ref="branchRef" :model="branchForm" :rules="rules" label-width="80px">
        <el-form-item label="分支名称" prop="knowlegetitle">
          <el-input
            v-model="branchForm.knowlegetitle"
            :disabled="
              branchForm.knowlegetitle == '拒绝' ||
              branchForm.knowlegetitle == '肯定' ||
              branchForm.knowlegetitle == '否定' ||
              branchForm.knowlegetitle == '未识别'
            "
            placeholder="请输入分支名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="分支属性" prop="branchType">
          <el-select v-model="branchForm.branchType" placeholder="请选择分支属性">
            <el-option label="肯定" :value="1"> </el-option>
            <el-option label="否定" :value="2"> </el-option>
            <el-option label="拒绝" :value="3"> </el-option>
            <el-option label="默认" :value="5"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" required>
          <el-input
            v-model="branchForm.keysInput"
            placeholder="请输入关键词后回车,多个，分割"
            @keyup.enter="keyDowns"
          ></el-input>
        </el-form-item>
        <div class="tag-box">
          <el-tag
            v-for="(tag, index) in branchForm.keys"
            :key="index"
            closable
            type="primary"
            class="mr-5px mt-5px"
            @close="removeTag(index)"
          >
            {{ tag }}
          </el-tag>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="branchDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </Dialog>
    <!-- 语音 -->
    <Dialog v-model="asrVoiceDialog" width="98%" :title="asrTitle">
      <div class="w-100% text-right mb-10px"
        ><el-button type="primary" @click="addAsrVoice">新增</el-button></div
      >
      <el-table :data="asrData" style="width: 100%" border>
        <el-table-column prop="filePath" label="文件地址" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="content" label="话术" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="id" label="编辑" align="center">
          <template #default="scope">
            <el-button type="danger" link @click="delVoice(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getAsrList"
      />
    </Dialog>
    <!-- 语音表单 -->
    <Dialog v-model="voiceDialog" title="新增" width="80%">
      <el-form ref="voiceForm" :model="asrVoiceFrom" :rules="voiceRules">
        <el-form-item label="语音文件" prop="filePath">
          <UploadFile
            v-model="asrVoiceFrom.filePath"
            :file-type="['mp3', 'wav']"
            :limit="1"
            :file-size="10"
            class="min-w-80px"
          />
        </el-form-item>
        <el-form-item label="话术" prop="content">
          <el-input v-model="asrVoiceFrom.content" placeholder="请输入话术"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="voiceDialog = false">取消</el-button>
        <el-button type="primary" @click="submitVoice" :disabled="asrDisable">确定</el-button>
      </template>
    </Dialog>
    <!-- 选择 -->
    <Dialog v-model="keyDiag" title="选择字段" width="80%">
      <el-form ref="voiceForm" :model="keyFile">
        <el-form-item label="字段" prop="content">
          <el-select v-model="keyFile.file" class="w-100%">
            <el-option
              v-for="i in keyList"
              :key="i.id"
              :label="i.extendName"
              :value="i.extendName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="keyDiag = false">取消</el-button>
        <el-button type="primary" @click="submitKey">确定</el-button>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, createVNode } from 'vue'
import { useIvrStore } from '@/store/modules/ivr'
import { generateRandomString } from '@/utils/node'
import { getIvrVoiceAll } from '@/api/call/voiceManagement'
import { cloneDeep } from 'lodash-es'
import { skillSimple } from '@/api/call/agent'
import {
  getIvrList,
  createIvrFlowVoice,
  getIvrFlowVoiceByType,
  getIvrFlowVoiceByTypePage,
  deleteIvrVoice,
  getPinyin,
  createIvrKeys,
  updateIvrKeys
} from '@/api/call/ivr'
import * as defaultIvrKnowApi from '@/api/call/manage'
import AudioPlayred from '../soundRecording/audioPlayered.vue'
import { RecordApi } from '@/api/call/record'

export default defineComponent({
  name: 'MenuNode',
  inject: ['getNode', 'getGraph'],
  data() {
    return {
      useStore: useIvrStore(),
      asrDisable: false,
      asrData: [],
      asrNotOptions: [],
      asrRepeatOptions: [],
      branchIdx: 0,
      branchType: '',
      branchForm: {
        id: '',
        knowlegetitle: '',
        branchType: '',
        keysInput: '',
        keys: [],
        type: ''
      },
      rules: {
        knowlegetitle: [{ required: true, message: '请输入分支名称', trigger: 'blur' }],
        branchType: [{ required: true, message: '分支属性不能为空', trigger: 'change' }]
      },
      voiceRules: {
        filePath: [{ required: true, message: '请上传文件', trigger: 'change' }],
        content: [{ required: true, message: '请输入话术', trigger: 'blur' }]
      },
      branchDialog: false,
      formState: {
        inputType: 2,
        interrupt: false,
        playbackType: 1,
        priorityType: 2,
        isStartAi: 1,
        fileId: '',
        filePath: '',
        content: '',
        menuButtons: [
          {
            key: 0,
            buttonName: '',
            buttonValue: '',
            isisEditing: false
          }
        ],
        matching: [],
        notPlaybackType: 1,
        notFileId: '',
        notFilePath: '',
        notContent: '',

        errorPlaybackType: 1,
        errorFileId: '',
        errorFilePath: '',
        errorContent: '',

        timeout: 3000,
        maxRetries: 3,

        asrNotJumpType: '',
        asrNotJumpId: '',
        asrNotFilePath: '',
        asrNotFileType: '',

        asrRepeatJumpType: '',
        asrRepeatJumpId: '',
        asrRepeatFilePath: '',
        asrRepeatFileType: '',

        asrRepeatKeys: ''
      },
      matchingOption: [],
      nodeName: '',
      id: 'menu_',
      voiceOptions: [],
      agentOptions: [],
      keyOption: [
        {
          id: 0,
          name: '0',
          value: '0',
          disabled: false
        },
        {
          id: 1,
          name: '1',
          value: '1',
          disabled: false
        },
        {
          id: 2,
          name: '2',
          value: '2',
          disabled: false
        },
        {
          id: 3,
          name: '3',
          value: '3',
          disabled: false
        },
        {
          id: 4,
          name: '4',
          value: '4',
          disabled: false
        },
        {
          id: 5,
          name: '5',
          value: '5',
          disabled: false
        },
        {
          id: 6,
          name: '6',
          value: '6',
          disabled: false
        },
        {
          id: 7,
          name: '7',
          value: '7',
          disabled: false
        },
        {
          id: 8,
          name: '8',
          value: '8',
          disabled: false
        },
        {
          id: 9,
          name: '9',
          value: '9',
          disabled: false
        },
        {
          id: 10,
          name: '*',
          value: '*',
          disabled: false
        },
        {
          id: 11,
          name: '#',
          value: '#',
          disabled: false
        }
      ],
      aiJumpTypeOptions: [
        {
          label: '挂机',
          value: 1
        },
        // {
        //   label: '等待用户应答',
        //   value: 2
        // },
        {
          label: '下一个主流程',
          value: 3
        },
        {
          label: '指定节点',
          value: 4
        },
        {
          label: '转人工',
          value: 5
        },
        {
          label: '上一个主流程',
          value: 6
        }
      ],
      asrNotJumpOptions: [
        {
          label: '挂机',
          value: 1
        },
        {
          label: '等待用户应答',
          value: 2
        },
        {
          label: '下一个主流程',
          value: 3
        },
        {
          label: '指定节点',
          value: 4
        },
        {
          label: '转人工',
          value: 5
        },
        {
          label: '重复本节点',
          value: 7
        }
      ],
      ivrOption: [],
      asrVoiceFrom: {
        ivrFlowId: '',
        filePath: '',
        type: '',
        content: ''
      },
      asrVoiceDialog: false,
      asrTitle: '回答语音',
      voiceDialog: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        type: ''
      },
      total: 0,
      numName: '', //
      userNotMusic: '',
      userRepeatMusic: '',
      keyList: [],
      keyDiag: false,
      keyFile: {
        file: ''
      }
    }
  },
  async mounted() {
    this.getFlowVoice1()
    this.getFlowVoice2()
    this.getAgentOption()
    this.formState.matching = []
    this.getVoiceOption()
    const node = (this as any).getNode()
    const graph = (this as any).getGraph()
    const { nodes } = graph
    const index = nodes.findIndex((item) => item.id == node.id)

    const nodeProps = nodes[index].properties

    this.nodeName = nodeProps.nodeName + (nodeProps.nodeIndex == 0 ? '' : nodeProps.nodeIndex)
    this.numName = nodeProps.nodeIndex

    this.formState = {
      ...this.formState,
      ...nodeProps,
      matching: nodeProps.matching || []
    }
    if (!this.formState.aiJumpType) this.formState.aiJumpType = 3
    if (!this.formState.asrNotJumpType) this.formState.asrNotJumpType = 2
    if (!this.formState.asrRepeatJumpType) this.formState.asrRepeatJumpType = 7
    this.keyOption.forEach((item) => {
      if (nodeProps.menuButtons.findIndex((i) => i.buttonValue == item.value) != -1) {
        item.disabled = true
      }
    })
    if (this.useStore.getLf) {
      this.ivrOption = this.useStore.getLf.getGraphData().nodes.filter((item) => item.id != node.id)
    }
    setTimeout(() => {
      if (document.getElementById('menu-box')) {
        const heightValue = document.getElementById('menu-box').offsetHeight + 10
        const updatedNode = { ...this.formState, height: heightValue }
        this.$nextTick(() => {
          this.useStore.getLf.setProperties(node.id, updatedNode)
        })
      }
    }, 1e3)
  },
  computed: {
    audioUrl() {
      if (this.formState.fileId) {
        return this.voiceOptions.find((item) => item.id === this.formState.fileId)?.filePath
      } else {
        return ''
      }
    }
  },
  components: { AudioPlayred },
  watch: {
    'useStore.getNextKey': {
      handler(newVal, oldVal) {
        if (newVal != -1) {
          let numValue = 0
          this.matchingOption = cloneDeep(this.useStore.getKeysList)
          this.matchingOption.forEach((item) => {
            item.next = this.numName + '-' + numValue
            numValue++
          })
        }
      }
    },
    'useStore.getKeysList': {
      handler(newVal, oldVal) {
        const node = (this as any).getNode()
        const graph = (this as any).getGraph()
        const { nodes } = graph
        const index = nodes.findIndex((item) => item.id == node.id)

        const nodeProps = nodes[index].properties
        if (!newVal || newVal.length === 0) return
        const { nodeIndex } = node.properties
        if (JSON.stringify(this.matchingOption) != JSON.stringify(newVal)) {
          this.matchingOption = cloneDeep(newVal).map((item, index) => ({
            ...item,
            next: `${nodeIndex}-${index}`
          }))
          // 只有在 matching 为空时才初始化
          if (nodeProps.matching.length === 0) {
            this.$nextTick(() => {
              this.formState.matching = this.matchingOption.filter((item) => item.id == -1)
            })
          } else {
            let arr = []
            nodeProps.matching.map((item) => {
              const idx = this.matchingOption.findIndex((i) => i.id == item.id)
              if (idx != -1) {
                arr.push(this.matchingOption[idx])
              }
            })
            this.$nextTick(() => {
              this.formState.matching = arr
            })
          }
        }
        if (document.getElementById('menu-box')) {
          const heightValue = document.getElementById('menu-box').offsetHeight + 10
          const updatedNode = { ...this.formState, height: heightValue }
          this.$nextTick(() => {
            this.useStore.getLf.setProperties(node.id, updatedNode)
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    keyDowns() {
      if (!this.branchForm.keysInput) return
      const arr = cloneDeep(this.branchForm.keysInput).split(',')
      this.branchForm.keys = [...this.branchForm.keys, ...arr]
      this.branchForm.keysInput = ''
    },
    async submit() {
      await this.$refs.branchRef.validate()
      if (this.branchForm.keys.length == 0) {
        ElMessage.error('请输入关键词')
        return
      }
      if (this.branchType == 'create') {
        const result = await getPinyin({ keys: this.branchForm.keys.join(',') })
        const result2 = await createIvrKeys({
          flowId: this.getParameterFromUrl('id'),
          keys: this.branchForm.keys.join(','),
          branch: this.branchForm.knowlegetitle,
          keysPinyin: result
        })
        this.useStore.setKeysList()
      } else {
        const result = await getPinyin({ keys: this.branchForm.keys.join(',') })
        // 系统的
        if (this.branchForm.type == '1') {
          defaultIvrKnowApi.updateIvrKeywords({
            id: this.branchForm.id,
            keys: this.branchForm.keys.join(','),
            branch: this.branchForm.knowlegetitle,
            keysPinyin: result
          })
        } else {
          // 流程创建的
          updateIvrKeys({
            id: this.branchForm.id,
            flowId: this.getParameterFromUrl('id'),
            keys: this.branchForm.keys.join(','),
            branch: this.branchForm.knowlegetitle,
            keysPinyin: result
          })
        }
        this.useStore.setNextKey()
      }
      this.branchDialog = false
    },
    addBranch() {
      this.branchForm.keys = []
      this.branchForm.knowlegetitle = ''
      this.branchForm.keysInput = ''
      this.branchType = 'create'
      this.branchForm.id = ''
      this.branchForm.type = ''
      this.branchDialog = true
    },
    removeTag(index) {
      this.branchForm.keys.splice(index, 1)
    },
    showEdith(item, idx) {
      if (item.branch == '未识别') {
        return false
      }
      if (item.type == 1) {
        return
      }
      this.branchIdx = idx
      this.branchType = 'update'
      this.branchForm.keys = item.keys.split(',')
      this.branchForm.knowlegetitle = item.branch
      this.branchForm.branchType = item.branchType
      this.branchForm.id = item.id
      this.branchForm.type = item.type ? item.type : ''
      this.branchForm.keysInput = ''
      this.branchDialog = true
    },
    updateProperties(type, key) {
      if (type == 'aiNumber' && this.formState.aiNumber == 0) {
        this.formState.priorityType = 2
      }
      if (type == 'nodes') {
        if (this.useStore.getLf) {
          const node = (this as any).getNode()
          this.ivrOption = this.useStore.getLf
            .getGraphData()
            .nodes.filter((item) => item.id != node.id)
        }
      }
      if (type == 'random1') {
        if (this.formState.asrNotFileType == 1) {
          this.formState.asrNotFilePath = ''
        } else {
          this.formState.asrNotFilePath = this.asrNotOptions.map((item) => {
            return {
              path: item.localPath,
              content: item.fileContent
            }
          })
        }
      }
      if (type == 'arr') {
        const itemMusic = this.asrNotOptions.find((item) => item.id == this.userNotMusic)
        if (itemMusic) {
          this.formState.asrNotFilePath = [
            {
              path: itemMusic.localPath,
              content: itemMusic.fileContent
            }
          ]
        }
      }
      if (type == 'random2') {
        if (this.formState.asrRepeatFileType == 1) {
          this.formState.asrRepeatFilePath = ''
        } else {
          this.formState.asrRepeatFilePath = this.asrRepeatOptions.map((item) => {
            return {
              path: item.localPath,
              content: item.fileContent
            }
          })
        }
      }
      if (type == 'arr2') {
        const itemMusic = this.asrRepeatOptions.find((item) => item.id == this.userRepeatMusic)
        if (itemMusic) {
          this.formState.asrRepeatFilePath = [
            {
              path: itemMusic.localPath,
              content: itemMusic.fileContent
            }
          ]
        }
      }
      if (type == 'path') {
        if (key == 'filePath') {
          const data = this.voiceOptions.find((item) => item.id == this.formState.fileId)
          if (data) {
            this.formState.filePath = data.localPath
            this.formState.content = data.content
          } else {
            this.formState.filePath = ''
          }
        }
        if (key == 'notFilePath') {
          const data = this.voiceOptions.find((item) => item.id == this.formState.notFileId)
          if (data) {
            this.formState.notFilePath = data.localPath
            this.formState.notContent = data.content
          } else {
            this.formState.notFilePath = ''
          }
        }
        if (key == 'errorFilePath') {
          const data = this.voiceOptions.find((item) => item.id == this.formState.errorFileId)
          if (data) {
            this.formState.errorFilePath = data.localPath
            this.formState.errorContent = data.content
          } else {
            this.formState.errorFilePath = ''
          }
        }
      }
      const node = (this as any).getNode()
      const graph = (this as any).getGraph()

      const { nodes } = graph
      const index = nodes.findIndex((item) => item.id === node.id)
      if (index !== -1) {
        const obj = cloneDeep(nodes[index].properties)
        if (this.formState.inputType == 2) {
          obj.height = document.getElementById('menu-box').offsetHeight + 10
        } else {
          obj.height = document.getElementById('menu-box').offsetHeight + 70
        }
        this.formState.matching = this.formState.matching.sort((a, b) => {
          const numA = parseInt(a.next.split('-')[1])
          const numB = parseInt(b.next.split('-')[1])
          return numA - numB
        })
        const updatedNode = { ...obj, ...this.formState, height: obj.height }
        this.useStore.getLf.setProperties(node.id, updatedNode)
      }

      // 数据删除了 删除对应的边
      if (type == 'delete') {
        const newKey = key + '_2'
        let indexs = graph.edges.findIndex((i) => i.sourceAnchorId == newKey)
        if (indexs != -1) {
          this.useStore.getLf.deleteEdgeByNodeId({
            sourceNodeId: graph.edges[indexs].sourceNodeId,
            targetNodeId: graph.edges[indexs].targetNodeId
          })
        }
      }
      if (type == 'add' || type == 'delete') {
        const endgsArr = graph.edges.filter((item) => item.sourceNodeId.split('_')[0] == 'menu')
        const graphData = this.useStore.getLf.getGraphData()
        graphData.edges.forEach((item) => {
          const index = endgsArr.findIndex((i) => i.id == item.id)
          if (index != -1) {
            endgsArr[index].pointsList[0].y = endgsArr[index].startPoint.y
            item.startPoint.y = endgsArr[index].startPoint.y
            item.pointsList = endgsArr[index].pointsList
            item.text.x = (item.startPoint.x + item.endPoint.x) / 2
            item.text.y = (item.startPoint.y + item.endPoint.y) / 2
          }
        })
        graph.graphDataToModel(graphData)
      }
      // 切换删除右边的线
      if (type == 'changeType') {
        const node = (this as any).getNode()
        const lf = this.useStore.getLf
        const connectedEdges = lf.getNodeEdges(node.id)
        connectedEdges.forEach((edge) => {
          lf.deleteEdge(edge.id)
        })
      }
      // 匹配
      if (type == 'matching') {
        const node = (this as any).getNode()
        const lf = this.useStore.getLf
        const connectedEdges = lf.getNodeEdges(node.id)
        const nodeModel = lf.getNodeModelById(node.id)
        const anchors = nodeModel.anchors || nodeModel.getDefaultAnchor()
        const rightAnchors = anchors
          .filter((anchor) => anchor.id.includes('_right') || anchor.x > nodeModel.x)
          .sort((a, b) => a.y - b.y)

        const arr = []
        connectedEdges.forEach((edge) => {
          // 左侧的不删除
          if (edge.targetNodeId == node.id) {
          } else {
            arr.push(edge)
            lf.deleteEdge(edge.id)
          }
        })
        arr.map((edge) => {
          const [next, branch] = edge.text.value.split(':')
          const { sourceAnchorId, targetAnchorId } = edge
          const matchIndex = this.formState.matching.findIndex((it) => it.branch == branch)
          if (matchIndex != -1) {
            lf.addEdge({
              sourceNodeId: edge.sourceNodeId,
              targetNodeId: edge.targetNodeId,
              startPoint: {
                x: rightAnchors[matchIndex].x,
                y: rightAnchors[matchIndex].y
              },
              text: `${this.formState.matching[matchIndex].next}:${this.formState.matching[matchIndex].branch}`
            })
          }
        })
      }
    },
    // 删除节点
    delNode() {
      const node = (this as any).getNode()
      ElMessageBox.confirm('确定要删除此节点吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(() => {
        this.useStore.getLf.deleteNode(node.id)
      })
    },
    // 复制节点
    copyNode() {
      const node = (this as any).getNode()
      const CloneNode = this.useStore.getLf.cloneNode(node.id)
      this.useStore.getLf.changeNodeId(CloneNode.id, this.id + generateRandomString(6))
    },
    // 语音文件列表
    async getVoiceOption() {
      this.voiceOptions = await getIvrVoiceAll()
    },
    countHeight2() {
      const node = (this as any).getNode()
      const heightNum = (this.formState.menuButtons.length - 1) * 40
      this.useStore.getLf.setProperties(node.id, {
        height: 680 + heightNum
      })
    },
    // 计算高度
    countHeight() {
      const node = (this as any).getNode()
      const heightNum = this.formState.menuButtons.length * 40

      this.useStore.getLf.setProperties(node.id, {
        height: 680 + heightNum
      })
    },
    setDisabled(newValue, oldValue) {
      const arr = this.formState.menuButtons.map((item) => item.buttonValue)
      this.keyOption.forEach((item) => {
        if (arr.indexOf(item.value) != -1) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
    },
    editTable(index) {
      this.formState.menuButtons[index].isisEditing = true
    },
    keepSave(index) {
      this.formState.menuButtons[index].isisEditing = false
      this.updateProperties()
    },
    handleDelete(index) {
      this.formState.menuButtons.splice(index, 1)
      this.countHeight2()
      this.updateProperties('delete', index - 1)
    },
    add() {
      this.countHeight()
      this.formState.menuButtons.push({
        key: `${this.formState.menuButtons.length + 1}`,
        buttonName: '',
        buttonValue: '',
        isisEditing: false
      })
      this.updateProperties('add')
    },
    getParameterFromUrl(paramName) {
      const url = new URL(window.location.href)
      return url.searchParams.get(paramName)
    },
    async getFlowVoice1() {
      this.asrNotOptions = await getIvrFlowVoiceByType({ type: 1 })
      if (this.formState.asrNotFilePath && this.formState.asrNotFilePath.length == 1) {
        const data = this.asrNotOptions.find(
          (item) => item.localPath == this.formState.asrNotFilePath[0].path
        )
        this.userNotMusic = data?.id
      }
    },
    async getFlowVoice2() {
      this.asrRepeatOptions = await getIvrFlowVoiceByType({ type: 2 })
      if (this.formState.asrRepeatFilePath && this.formState.asrRepeatFilePath.length == 1) {
        const data = this.asrRepeatOptions.find(
          (item) => item.localPath == this.formState.asrRepeatFilePath[0].path
        )
        this.userRepeatMusic = data?.id
      }
    },
    // 查询当前列表
    setAsrVoice(t) {
      this.asrVoiceDialog = true
      if (t == 1) {
        this.asrTitle = '用户未回答语音'
      } else {
        this.asrTitle = '用户重复回答语音'
      }
      this.queryParams.type = t
      this.getAsrList()
      this.asrVoiceFrom.type = t
      this.asrVoiceFrom.ivrFlowId = this.getParameterFromUrl('groupId')
    },
    // list
    async getAsrList() {
      const data = await getIvrFlowVoiceByTypePage(this.queryParams)
      this.asrData = data.list
      this.total = data.total
    },
    async delVoice(id) {
      ElMessageBox.confirm('确定删除此数据吗？', '提示', {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(async () => {
        await deleteIvrVoice(id)
        ElMessage.success('操作成功')
        this.getAsrList()
      })
    },
    // 显示表单
    addAsrVoice() {
      this.voiceDialog = true
      this.asrVoiceFrom.content = ''
      this.asrVoiceFrom.filePath = ''
    },
    // 表单提交
    async submitVoice() {
      await this.$refs.voiceForm.validate()
      try {
        this.asrDisable = true
        await createIvrFlowVoice(this.asrVoiceFrom)
        ElMessage.success('操作成功')
        this.voiceDialog = false
        this.getAsrList()
        if (this.queryParams.type == 1) {
          this.getFlowVoice1()
        } else {
          this.getFlowVoice2()
        }
      } finally {
        this.asrDisable = false
      }
    },
    async getAgentOption() {
      this.agentOptions = await skillSimple()
    },
    async changeContent() {
      this.keyList = await RecordApi.taskCalleeListNumberRule()
      this.keyFile.file = ''
      this.keyDiag = true
    },
    submitKey() {
      this.keyDiag = false
      this.formState.content = this.formState.content + `{{${this.keyFile.file}}}`
    }
  }
})
</script>
<style scoped lang="scss">
.tag-box {
  max-height: 200px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:horizontal:start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:horizontal:end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.menu-content {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  padding: 20px;
}
.menu {
  padding: 16px;
  box-shadow: 0 2px 4px #1f23291f;
  border: 2px solid #fff !important;
  background: #ffffff;
  border-radius: 8px;
}
.img-box {
  background: #229dff;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-right: 8px;
}
.menu-tite {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  justify-content: space-between;
}
.w-16 {
  width: 16px;
}
.h-16 {
  height: 16px;
}
.titles {
  font-size: 16px;
  color: #1f2329;
  font-weight: bold;
}
.flex {
  display: flex;
  align-items: center;
}
.p-8 {
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.h-l {
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}
.h-l:before {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 80%;
  content: '';
  background: #407fff;
}
.h-ls {
  background: #f5f6f7;
}
.ant-form-item {
  margin-bottom: 10px;
}

.editable-cell {
  height: 28px;
  overflow: hidden;
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
.hover-icon:hover path {
  fill: #0052cc !important;
}
.hover-icon-not:hover path {
  cursor: none;
}
</style>
